<template>
    <span class="like" @click="likeClick()">
          <svg-icon name="like" v-if="hasLike"></svg-icon>
          <svg-icon name="cancel-like" v-else></svg-icon>
    </span>
</template>

<script>
import { clickLike,cancelLike } from '@/api/like'
import {mapGetters} from "vuex";

export default {
  name: "index",
  props: ['likeList'],
  computed: {
    ...mapGetters(['userId']),
  },
  data(){
    return{
      hasLike: false,
    }
  },
  methods:{
    likeClick(){
      if (!this.userId) { //未登录
        this.$notify.error({
          title: '错误',
          message: '还未登录不能点赞哦~'
        });
        return
      }
      let val = this.likeList
      let data = {
        blogId: val.blogId,
        commentId: val.commentId,
      }
      if (!this.hasLike) {
        //点赞
        clickLike(data).then(res => {
          if (res.status) {
            this.$message.success('点赞成功')
            this.hasLike = !this.hasLike
            this.likeList.likeCount++
          }
        })
      } else {
        //点灭
        cancelLike(data).then(res => {
          if (res.status) {
            this.$message.success('点灭了')
            this.hasLike = !this.hasLike
            this.likeList.likeCount--
          }
        })
      }
    },
  },
  created() {
    if (this.userId) {  //登录了
      //从数据库获取的数据判断哪些用户点了赞
        if (this.likeList.userLikeCollection.indexOf(this.userId) != -1) {
          this.hasLike = true
        }
    }
  }
}
</script>

<style scoped>

</style>
